<ui:composition template="template/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="title">
		Solicitud de alta de cliente
    </ui:define>

	<ui:define name="content">
		<h1>Solicitud de alta de cliente</h1>
		<p>Con el siguiente formulario usted puede formar parte de nuestro
			sistema, aprovechando todos nuestros beneficios.</p>

		<h:form id="form" style="margin-left:30px">
			<p:growl id="messages" />


			<div align="left" style="margin-top: 10px">

				<p:panel header="Datos de Cliente">
					<h:panelGrid id="displayViewCliente" columns="3" cellspacing="10"
						styleClass="admin-input-text">

						<p:column>
							<h:outputLabel for="apellido" value="Apellido: " />
						</p:column>
						<p:column>
							<p:inputText id="apellido" style="width: 200px"
								value="#{clienteMB.apellido}" required="true"
								requiredMessage="Campo apellido obligatorio" maxlength="40">
								<f:validateLength minimum="3" />
								<p:ajax event="blur" update="apellidoMsg" />
							</p:inputText>
						</p:column>
						<p:column>
							<p:message id="apellidoMsg" for="apellido" display="icon" />
						</p:column>

						<p:column>
							<h:outputLabel for="nombre" value="Nombre: " />
						</p:column>
						<p:column>
							<p:inputText id="nombre" style="width: 200px"
								value="#{clienteMB.nombre}" required="true"
								requiredMessage="Campo nombre obligatorio" maxlength="40">
								<f:validateLength minimum="3" />
								<p:ajax event="blur" update="nombreMsg" />
							</p:inputText>
						</p:column>
						<p:column>
							<p:message id="nombreMsg" for="nombre" display="icon" />
						</p:column>

						<p:column>
							<h:outputText for="tipoDoc" value="Tipo Doc.: " />
						</p:column>
						<p:column>
							<p:selectOneMenu style="width: 220px"
								value="#{clienteMB.tipoDoc}" effect="fade">
								<f:selectItems value="#{tipoDocMB.tipoDocList}" var="tipoDoc"
									itemValue="#{tipoDoc}" itemLabel="#{tipoDoc.nombre}" />
								<f:converter converterId="tipoDocConverter" />
							</p:selectOneMenu>
						</p:column>
						<p:column></p:column>

						<p:column>
							<h:outputLabel for="nroDoc" value="Nro. Documento: " />
						</p:column>
						<p:column>
							<p:inputText id="nroDoc" value="#{clienteMB.nroDoc}"
								required="true" requiredMessage="Campo nro. documento obligatorio"
								type="numeric" maxlength="10">
								<f:validateLength minimum="6" />
								<p:ajax event="blur" update="nroDocMsg" />
							</p:inputText>
						</p:column>
						<p:column>
							<p:message id="nroDocMsg" for="nroDoc" display="icon" />
						</p:column>

						<p:column>
							<h:outputLabel for="email" value="E-mail: " />
						</p:column>
						<p:column>
							<p:inputText id="email" value="#{clienteMB.email}"
								style="width: 200px" required="true"
								requiredMessage="Campo e-mail obligatorio" type="email" maxlength="100"
								validator="#{validatorMB.isValidEmailUsuario}">
								<f:validateLength minimum="5" />
								<p:ajax event="blur" update="emailMsg" />
							</p:inputText>
						</p:column>
						<p:column><p:message id="emailMsg" for="email" display="icon" /></p:column>

						<p:column>
							<h:outputText for="barrio" value="Barrio: " />
						</p:column>
						<p:column>
							<p:selectOneMenu style="width: 220px" value="#{clienteMB.barrio}"
								effect="fade">
								<f:selectItems value="#{barrioMB.barrioList}" var="barrio"
									itemValue="#{barrio}" itemLabel="#{barrio.nombre}" />
								<f:converter converterId="barrioConverter" />
							</p:selectOneMenu>
						</p:column>
						<p:column></p:column>

						<p:column>
							<h:outputLabel for="domicilio" value="Domicilio: " />
						</p:column>
						<p:column>
							<p:inputText id="domicilio" value="#{clienteMB.domicilio}"
								style="width: 200px" required="true"
								requiredMessage="Campo domicilio obligatorio" maxlength="100">
								<f:validateLength minimum="5" />
								<p:ajax event="blur" update="domicilioMsg" />
							</p:inputText>
						</p:column>
						<p:column>
							<p:message id="domicilioMsg" for="domicilio" display="icon" />
						</p:column>

						<p:column>
							<h:outputLabel for="telefono" value="Telefono: " />
						</p:column>
						<p:column>
							<p:inputText id="telefono" value="#{clienteMB.telefono}"
								style="width: 200px" maxlength="25">
							</p:inputText>
						</p:column>
						<p:column />
					</h:panelGrid>
				</p:panel>
				
				<p:panel header="Datos de Usuario" style="margin-top: 10px">
					<h:panelGrid id="displayViewUsuario" columns="3" cellspacing="10"
						styleClass="admin-input-text">

						<p:column>
							<h:outputLabel for="nombreUser" value="Nombre Usuario: " />
						</p:column>
						<p:column>
							<p:inputText id="nombreUser" style="width: 200px"
								value="#{clienteMB.nombreUser}" required="true"
								requiredMessage="Campo nombre usuario obligatorio" maxlength="25"
								validator="#{validatorMB.isValidUserName}">
								<f:validateLength minimum="5" />
								<p:ajax event="blur" update="nombreUserMsg" />
							</p:inputText>
						</p:column>
						<p:column><p:message id="nombreUserMsg" for="nombreUser" display="icon" /></p:column>

						<p:column>
							<h:outputLabel for="password" value="Contraseña: " />
						</p:column>
						<p:column>
							<p:password id="password" style="width: 200px" feedback="true"
								value="#{clienteMB.password}" required="true"
								match="passwordRepeat" requiredMessage="Campo contraseña obligatorio">
								<f:validateLength minimum="5" />
								<p:ajax event="blur" update="passwordRepeatMsg" />
							</p:password>
						</p:column>
						<p:column />

						<p:column>
							<h:outputLabel for="passwordRepeat" value="Repetir Contraseña: " />
						</p:column>
						<p:column>
							<p:password id="passwordRepeat" style="width: 200px"
								value="#{clienteMB.password}" required="true" feedback="true"
								requiredMessage="Campo repetir contraseña obligatorio">
								<f:validateLength minimum="5" />
								<p:ajax event="blur" update="passwordRepeatMsg" />
							</p:password>
						</p:column>
						<p:column>
							<p:message id="passwordRepeatMsg" for="passwordRepeat"
								display="icon" />
						</p:column>
					</h:panelGrid>
				</p:panel>
				<div align="center" style="margin-top: 10px">
					<p:commandButton id="addCliente" value="Registrar Cliente"
						action="#{clienteMB.addSolicitudCliente}" ajax="false" />
					<p:commandButton id="reset" value="Cancelar" immediate="true"
						action="/index.html?faces-redirect=true" ajax="false"
						style="margin-left:10px" />
				</div>
			</div>
		</h:form>
	</ui:define>
</ui:composition>